/*
980px grid system ~ Core CSS.
12 columns ~ margin: 20px

Based on the golden grid system - http://code.google.com/p/the-golden-grid/
by Vladimir Carrer

Created by the Grid System Generator - v1.00
Learn more ~ http://www.gridsystemgenerator.com/
*/
/* =Containers
--------------------------------------------------------------------------------*/
.main {
  margin-left: auto;
  margin-right: auto;
  width: 980px; }

/* =Grid >> Global
--------------------------------------------------------------------------------*/
.g80, .g160, .g240, .g320, .g400, .g480, .g560, .g640, .g720, .g800, .g880, .g960 {
  display: inline;
  float: left;
  margin-left: 20px; }

/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.g80 {
  width: 60px; }

.g160 {
  width: 140px; }

.g240 {
  width: 220px; }

.g320 {
  width: 300px; }

.g400 {
  width: 380px; }

.g480 {
  width: 460px; }

.g560 {
  width: 540px; }

.g640 {
  width: 620px; }

.g720 {
  width: 700px; }

.g800 {
  width: 780px; }

.g880 {
  width: 860px; }

.g960 {
  width: 940px; }

/* =Grid >> 12 Columns - no left margin
--------------------------------------------------------------------------------*/
.ml80 {
  margin-left: 100px; }

.ml160 {
  margin-left: 180px; }

.ml240 {
  margin-left: 260px; }

.ml320 {
  margin-left: 340px; }

.ml400 {
  margin-left: 420px; }

.ml480 {
  margin-left: 500px; }

.ml560 {
  margin-left: 580px; }

.ml640 {
  margin-left: 660px; }

.ml720 {
  margin-left: 740px; }

.ml800 {
  margin-left: 820px; }

.ml880 {
  margin-left: 900px; }

.ml960 {
  margin-left: 980px; }

.inside {
  margin-left: 0; }

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0; }

.clearfix {
  display: inline-block; }

* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }